/**
* @author: LiYaHui
* @date: 2021-11-01
* @description: 预警管理
*/
<template>
  <div class="default-wrap">
    <div class="content-title">
      <TitleCard title="总预警数" :count="statistics.one"/>
      <TitleCard title="今日预警数" :count="statistics.two"/>
      <TitleCard title="今日危险预警数" :count="statistics.three"/>
      <TitleCard title="今日未处理" :count="statistics.four"/>
    </div>
    <div class="content-search">
      <div class="search-select">

        <Select v-model="search.locationID" placeholder="区域" clearable @on-change="onLocationChange">
          <Option v-for="item in locationList" :value="item.id" :key="item.id">{{ item.locationName }}</Option>
        </Select>
        <Select v-model="search.videoID" clearable placeholder="摄像头名称">
          <Option v-for="item in LocationsVideoList" :value="item.id" :key="item.id">{{ item.videoName }}</Option>
        </Select>
        <Select v-model="search.alarmType" clearable placeholder="预警类型">
          <Option v-for="item in alarmTypeList" :value="item.id" :key="item.id">{{ item.alarmTypeName }}</Option>
        </Select>
        <Select v-model="search.algoType" clearable placeholder="预警项">
          <Option v-for="item in algorithmType" :value="item.id" :key="item.id">{{ item.algorithmName }}</Option>
        </Select>
        <Select v-model="search.alarmLevel" clearable placeholder="预警等级">
          <Option v-for="item in alarmLevelList" :value="item.level" :key="item.level">{{
              item.alarmLevelName
            }}
          </Option>
        </Select>
        <Select v-model="search.alarmState" clearable placeholder="预警状态">
          <Option v-for="item in alarmStateDef" :value="item.id" :key="item.id">{{ item.stateName }}</Option>
        </Select>
        <Select v-model="search.date" clearable placeholder="时间">
          <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <i class="search-icon" @click="handleSearch"></i>
      </div>
      <div class="search-btn">
        <!--        <Button type="primary">高级检索</Button>-->
        <!--        <Dropdown style="margin-left: 8px" @on-click="onDropClick">-->
        <!--          <Button type="primary">-->
        <!--            更多-->
        <!--            <Icon type="ios-arrow-down"></Icon>-->
        <!--          </Button>-->
        <!--          <Dropdown-menu slot="list">-->
        <!--            <Dropdown-item name="upload">批量导入</Dropdown-item>-->
        <!--          </Dropdown-menu>-->
        <!--        </Dropdown>-->
      </div>

    </div>

    <div class="content-table">
      <Table max-height="600" border :columns="columns" :data="tableData"></Table>
    </div>
    <div class="content-page">
      <div class="page-btn">
        <Button type="primary" :loading="exportLoading" @click="handleDown">数据导出</Button>
      </div>
      <Page :total="total" :page-size="pageSize" :current="pageIndex" @on-change="onChange" show-elevator></Page>
    </div>

    <Detail
      v-if="showDetail"
      v-model="showDetail"
      :titles="titles"
      :data="data"
      @close="onClose"
    />
  </div>
</template>

<script type="text/jsx">
import TitleCard from '../components/TitleCard'
import page from '../mixins/page'
import * as api from '@/api/alarm'
import Detail from './components/Detail'
import excel from '@/libs/excel'
import moment from 'moment'

export default {
  name: 'Management',
  mixins: [page],
  components: {
    TitleCard,
    Detail
  },
  data () {
    let that = this
    return {
      search: {},
      list: [
        { label: '本日', value: 1 },
        { label: '本周', value: 2 },
        { label: '本月', value: 3 },
        { label: '本季', value: 4 },
        { label: '本年', value: 5 }
      ],
      exportLoading: false,
      columns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        {
          title: '区域',
          key: 'locationName',
          align: 'center'
        },
        {
          title: '摄像头名称',
          key: 'videoName',
          align: 'center'
        },
        {
          title: '预警类型',
          key: 'alarmTypeName',
          align: 'center'
        },
        {
          title: '预警项',
          key: 'algorithmName',
          align: 'center'
        },
        {
          title: '预警等级',
          key: 'alarmLevelName',
          align: 'center'
        },
        {
          title: '预警时间',
          key: 'alarmDateTime',
          align: 'center'
        },
        {
          title: '预警状态',
          key: 'stateName',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 170,
          align: 'center',
          render (c, { row, column, index }) {
            return (
              <div class="table-button-wrap">
                <span onClick={() => that.handleInfo(row)} class="table-btn">查看</span>
                <span onClick={() => that.handleDispose(row)} class={ `table-btn ${row.stateId === 1 ? '' : 'is-disabled'}` }>核验</span>
              </div>
            )
          }
        }
      ],
      tableData: [],
      statistics: {},
      alarmLevelList: [],
      alarmTypeList: [],
      showDetail: false,
      locationList: [],
      LocationsVideoList: [],
      alarmStateDef: [],
      algorithmType: [],
      titles: {},
      data: {}
    }
  },
  created () {
    // 获取预警统计
    let startDate = new Date().getFullYear() + '-01-01 00:00:00'
    let stopDate = new Date().getFullYear() + '-12-31 23:59:59'
    let params = {
      st: 6,
      startDate,
      stopDate
    }
    api.getStatistics(params).then(response => {
      this.statistics = response.data
    })

    // 获取预警等级
    api.getAlarmLevel().then(response => {
      this.alarmLevelList = response.data
    })

    // 获取预警类型
    api.getAlarmType().then(response => {
      this.alarmTypeList = response.data
    })

    // 获取区域
    api.getLocations().then(response => {
      this.locationList = response.data
    })

    // 获取预警状态
    api.getAlarmStateDef().then(response => {
      this.alarmStateDef = response.data
    })

    // 获取所有预警项
    api.getAll().then(response => {
      this.algorithmType = response.data
    })

    this.init()
  },
  methods: {
    // 获取表格数据
    init () {
      let date = this.getCurrentDate()
      let params = {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex,
        ...date
      }
      for (let key in this.search) {
        if (this.search[key]) {
          params[key] = this.search[key]
        }
      }
      api.getQuckSearchPage(params).then(response => {
        this.tableData = response.data.alarms.map(item => {
          item.locationName = item.alarm.video.location.locationName
          item.videoName = item.alarm.video.videoName
          item.alarmTypeName = item.alarm.algorithm.alarmType.alarmTypeName
          item.algorithmName = item.alarm.algorithm.algorithmName
          item.alarmLevelName = item.alarm.algorithm.alarmLevel.alarmLevelName
          item.alarmDateTime = moment(item.alarm.alarmDateTime).format('YYYY-MM-DD HH:mm:ss')
          item.stateName = item.alarmStateDef.stateName
          item.stateId = item.alarmStateDef.id
          return item
        })
        this.total = response.data.allCount
      })
    },
    onChange (value) {
      this.pageIndex = value
      this.init()
    },
    /**
     * 根据区域获取摄像头
     * */
    onLocationChange (value) {
      this.search.videoID = ''
      if (value) {
        api.getLocationsVideo(value).then(response => {
          this.LocationsVideoList = response.data
        })
      } else {
        this.LocationsVideoList = []
      }
    },
    handleInfo (row) {
      api.getAlarmInfo(row.alarm.id).then(response => {
        this.titles = {
          locationName: response.data.video.location.locationName,
          videoName: response.data.video.videoName,
          algorithmName: response.data.algorithm.algorithmName,
          createTime: response.data.alarmDateTime
        }
        this.data = {
          alarmImagePath: response.data.alarmImagePath,
          alarmVideoPath: response.data.alarmVideoPath,
          level: response.data.algorithm.alarmLevel.level,
          alarmID: response.data.id,
          status: 2
        }
        this.showDetail = true
      })
    },
    handleDispose (row) {
      if (row.stateId !== 1) return
      api.getAlarmInfo(row.alarm.id).then(response => {
        this.titles = {
          locationName: response.data.video.location.locationName,
          videoName: response.data.video.videoName,
          algorithmName: response.data.algorithm.algorithmName,
          createTime: response.data.alarmDateTime
        }
        this.data = {
          alarmImagePath: response.data.alarmImagePath,
          alarmVideoPath: response.data.alarmVideoPath,
          level: response.data.algorithm.alarmLevel.level,
          alarmID: response.data.id,
          status: 1
        }
        this.showDetail = true
      })
    },
    // 弹窗关闭
    onClose () {
      this.showDetail = false
      this.init()
    },
    // 时间转换
    getCurrentDate () {
      let startDT = null
      let stopDT = moment(Date.now()).format('YYYY-MM-DD HH:mm:ss')
      let currentDay = null
      let date = new Date()
      switch (this.search.date) {
        // 本日
        case 1:
          currentDay = moment(Date.now()).format('YYYY-MM-DD')
          startDT = currentDay + ' 00:00:00'
          break
        // 本周
        case 2:
          let weekday = date.getDay() || 7
          currentDay = date.setDate(date.getDate() - weekday + 1)
          currentDay = moment(currentDay).format('YYYY-MM-DD')
          startDT = currentDay + ' 00:00:00'
          break
        // 本月
        case 3:
          currentDay = moment(date.setDate(1)).format('YYYY-MM-DD')
          startDT = currentDay + ' 00:00:00'
          break
        // 本季
        case 4:
          let month = date.getMonth()
          if (month < 3) {
            date.setMonth(0)
          } else if (month > 2 && month < 6) {
            date.setMonth(3)
          } else if (month > 5 && month < 9) {
            date.setMonth(6)
          } else if (month > 8 && month < 11) {
            date.setMonth(9)
          }
          date = new Date(date).setDate(1)
          currentDay = moment(date).format('YYYY-MM-DD')
          startDT = currentDay + ' 00:00:00'
          break
        // 本年
        case 5:
          date = date.setDate(1)
          date = new Date(date).setMonth(0)
          currentDay = moment(date).format('YYYY-MM-DD')
          startDT = currentDay + ' 00:00:00'
          break
        default:
          break
      }
      let params = {
        startDT,
        stopDT
      }

      return params
    },
    // 数据导出
    handleDown () {
      this.exportLoading = true
      let date = this.getCurrentDate()
      let options = {
        ...date
      }
      for (let key in this.search) {
        if (this.search[key]) {
          options[key] = this.search[key]
        }
      }
      api.getQuckSearch(options).then(response => {
        let list = response.data.alarms.map(item => {
          item.locationName = item.alarm.video.location.locationName
          item.videoName = item.alarm.video.videoName
          item.alarmTypeName = item.alarm.algorithm.alarmType.alarmTypeName
          item.algorithmName = item.alarm.algorithm.algorithmName
          item.alarmLevelName = item.alarm.algorithm.alarmLevel.alarmLevelName
          item.alarmDateTime = moment(item.alarm.alarmDateTime).format('YYYY-MM-DD HH:mm:ss')
          item.stateName = item.alarmStateDef.stateName
          return item
        })

        if (list.length) {
          const params = {
            title: ['区域', '摄像头名称', '预警类型', '预警项', '预警等级', '预警时间', '预警状态'],
            key: ['locationName', 'videoName', 'alarmTypeName', 'algorithmName', 'alarmLevelName', 'alarmDateTime', 'stateName'],
            data: list,
            autoWidth: true,
            filename: `预警列表_${Date.now()}`
          }
          excel.export_array_to_excel(params)
        } else {
          this.$Message.info('暂无数据！')
        }
      }).finally(() => {
        this.exportLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "../styles/index.less";
</style>
